<template>
  <scroll class="category-left-scroll">
    <div
      v-for="(item, index) in category"
      :key="index"
      class="left-item"
      :class="{ active: curIndex === index }"
      @click="cateLeftClick(index)"
    >
      <p>{{ item.title }}</p>
    </div>
  </scroll>
</template>
<script>
import Scroll from "components/common/scroll/Scroll";

import { getCategory } from "network/category";

export default {
  name: "CategoryLeft",
  components: {
    Scroll
  },
  props: {},
  data() {
    return {
      curIndex: 0,
      category: []
    };
  },
  created() {
    getCategory().then(res => {
      this.category = res.data.category.list;
      this.cateLeftClick(this.curIndex);
    });
    console.log("创建了", this.category);
  },
  methods: {
    cateLeftClick(index) {
      this.curIndex = index;
      this.$bus.$emit("cateLeftClick", this.category[this.curIndex]);
    }
  }
};
</script>
<style scoped>
.category-left-scroll {
  height: 100%;
  width: 30%;
  overflow: hidden;
  background-color: #eee;
}

.left-item {
  height: 47px;
  line-height: 47px;
  text-align: center;
}

.active {
  background-color: #fff;
}

.active p {
  width: 100%;
  display: inline-block;
  color: var(--color-high-text);
  font-weight: 400;
  line-height: 25px; /* inline-block后line-height决定了p的高度 */
  border-left: 4px solid var(--color-high-text);
}
</style>
